<template>
  <div class="menu-btn-group">
    <div class="query" @mouseenter="showQuery" @mouseleave="hiddenQuery">
      <span v-show="queryToggle">搜索</span>
      <a-form
        v-show="!queryToggle"
        layout="inline"
        :form="form"
        @submit="handleQuery"
        class="query-content"
      >
        <a-form-item label="用户名">
          <a-input
            v-decorator="['username']"
            autocomplete="off"
            allowClear
            style="width: 200px"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">搜索</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="control" @mouseenter="showControl" @mouseleave="hiddenControl">
      <span v-show="controlToggle">操作</span>
      <div v-show="!controlToggle" class="control-content">
        <a-button
          type="danger"
          icon="plus"
          @click="handleAdd"
          style="margin-right: 30px"
          >新增</a-button
        >
        <a-button
          type="danger"
          icon="delete"
          @click="handleDelete"
          :disabled="!selectedRows.length"
          >删除</a-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserToggle",
  props: {
    selectedRows: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      queryToggle: true,
      controlToggle: true,
    };
  },
  methods: {
    showQuery() {
      let queryNode = document.querySelector(".query");
      let controlNode = document.querySelector(".control");
      queryNode.style.width = "100%";
      queryNode.style.background = "rgba(24, 144, 255, 0)";
      controlNode.style.width = "8%";
      this.queryToggle = false;
    },
    showControl() {
      let queryNode = document.querySelector(".query");
      let controlNode = document.querySelector(".control");
      controlNode.style.width = "100%";
      controlNode.style.background = "rgba(255, 77, 79, 0)";
      queryNode.style.width = "8%";
      this.controlToggle = false;
    },
    hiddenQuery() {
      let queryNode = document.querySelector(".query");
      let controlNode = document.querySelector(".control");
      queryNode.style.width = "50%";
      queryNode.style.background = "rgba(24, 144, 255, 1)";
      controlNode.style.width = "50%";
      this.queryToggle = true;
    },
    hiddenControl() {
      let queryNode = document.querySelector(".query");
      let controlNode = document.querySelector(".control");
      controlNode.style.width = "50%";
      controlNode.style.background = "rgba(255, 77, 79, 1)";
      queryNode.style.width = "50%";
      this.controlToggle = true;
    },
    handleQuery(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          let params = {};
          for (let key in values) {
            values[key] && (params[key] = values[key]);
          }
          this.$emit("search", params);
        }
      });
    },
    handleAdd() {
      this.$store.dispatch("SetAddVisible", [true, "user"]);
    },
    handleDelete() {
      this.$emit('deleteMore');
    }
  },
};
</script>

<style lang="scss">
.menu-btn-group {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #f2f2f2;
  text-align: center;
  letter-spacing: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  display: flex;
  .query {
    width: 50%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    transition: ease 1s;
    background: rgba(24, 144, 255, 0.9);
    .query-content {
      text-align: left;
      margin-left: 5px;
      letter-spacing: 0;
    }
  }
  .control {
    width: 50%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: ease 1s;
    background: rgba(255, 77, 79, 0.9);
    .control-content {
      text-align: right;
      margin-right: 5px;
      letter-spacing: 0;
    }
  }
}
</style>